Skip to content

Pause offscreen homepage adapter motion - #1093

Merged
tannerlinsley merged 2 commits into
mainfrom
agent/pause-offscreen-home-adapter-motion
Aug 4, 2026
Merged

Pause offscreen homepage adapter motion#1093
tannerlinsley merged 2 commits into
mainfrom
agent/pause-offscreen-home-adapter-motion

Conversation

@tannerlinsley

@tannerlinsley tannerlinsley commented Aug 2, 2026

Copy link
Copy Markdown
Member

What changed

Pause the homepage framework-adapter proof's timer and animation-frame loop unless the graph intersects the viewport and the visitor allows motion.

Evidence and impact

FrameworkAdapterGraph, added in #1075, mounted several sections below the fold but immediately started:

  • a 1.15-second interval that updates the active adapter
  • a continuous animation-frame loop that commits React state about every 33ms

The animation-frame loop therefore drove roughly 30 React renders per second from initial homepage load even when the proof had never entered the viewport. The active-adapter interval also continued offscreen and for reduced-motion visitors.

The graph now remains static until visible, stops both loops when it leaves the viewport, and keeps the existing animation unchanged while visible. Reduced-motion visitors get the same static proof without either state loop.

Validation

  • pnpm test
  • TypeScript and type-aware lint clean
  • 143 tests passed; 1 environment-gated docs smoke test skipped
  • Commit hook reran formatting and the full test gate successfully
  • git diff --check

Risk

Low. This changes only when the decorative proof runs; its visible motion, geometry, and content are unchanged.

Summary by CodeRabbit

  • Accessibility

    • Respects reduced-motion preferences by disabling animated graph transitions when requested.
    • Provides smoother, less distracting experiences for visitors who prefer reduced motion.
  • Performance

    • Runs graph cycling, flow animations, and chart autoplay only while visuals are visible.
    • Improves cleanup of animation resources when visualizations leave the screen or become inactive.
    • Enhances viewport-aware behavior across landing-page graphics.

@tannerlinsley tannerlinsley added the source-audit Tracked by the automated source audit label Aug 2, 2026
@coderabbitai

coderabbitai Bot commented Aug 2, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4a7f108f-1c32-4674-9aa6-90d6dd717de9

📥 Commits

Reviewing files that changed from the base of the PR and between 45726e7 and c1bd7ba.

📒 Files selected for processing (4)
  • src/components/landing/ChartsCatalogGallery.tsx
  • src/components/landing/ChartsLandingGraphics.tsx
  • src/hooks/useInView.ts
  • src/routes/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/routes/index.tsx

📝 Walkthrough

Walkthrough

Landing-page chart animations now use shared viewport tracking. FrameworkAdapterGraph runs adapter cycling and flow animation only when visible and when reduced motion is not preferred. Animation resources are cleaned up when effects stop or unmount.

Changes

Visibility-aware landing animations

Layer / File(s) Summary
Shared viewport tracking
src/hooks/useInView.ts
Adds the configurable useInView hook with unsupported-browser fallback and observer cleanup.
Landing gallery integration
src/components/landing/ChartsCatalogGallery.tsx, src/components/landing/ChartsLandingGraphics.tsx
Replaces local intersection-observer state with useInView thresholds while preserving animation visibility conditions.
Graph animation gating
src/routes/index.tsx
Uses graph visibility and reduced-motion state to control adapter cycling and flow animation. The graph ref and animation effect dependencies are updated.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant FrameworkAdapterGraph
  participant useInView
  participant usePrefersReducedMotion
  FrameworkAdapterGraph->>useInView: observe graph container visibility
  FrameworkAdapterGraph->>usePrefersReducedMotion: read motion preference
  useInView-->>FrameworkAdapterGraph: visibility state
  usePrefersReducedMotion-->>FrameworkAdapterGraph: reduced-motion state
  FrameworkAdapterGraph->>FrameworkAdapterGraph: run or stop adapter cycling and flow animation
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: pausing homepage adapter motion when it is offscreen.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch agent/pause-offscreen-home-adapter-motion

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
tanstack-com c1bd7ba Commit Preview URL

Branch Preview URL
Aug 04 2026, 10:06 PM

@tannerlinsley
tannerlinsley merged commit 476a3ae into main Aug 4, 2026
6 of 7 checks passed
@tannerlinsley
tannerlinsley deleted the agent/pause-offscreen-home-adapter-motion branch August 4, 2026 22:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

source-audit Tracked by the automated source audit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant